{% load future wenlincms_tags staticfiles wlcore_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>企业生命周期演示界面</title>
    <style>
        body {
            font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
        }
        .highcharts-credits {
            display: none;
        }
        tspan, text {
            font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
        }
        #main {
            width: 100%;
        }
        #main .chartsdiv {
            width: 1000px;
            height: 500px;
            margin: 50px auto;
            padding-right: 0;
        }
        #main .title {
            font-size: 22px;
            font-weight: 500;
            text-align: center;
            margin: 40px 0;
        }
        #main #container, #main #gailv {
            margin-top: 0;
        }
        #main image {
            width: 40px;
            height: 46px;
        }
        #saasloading {
            position: absolute;
            background: #fff;
            width: 99%;
            height: 99%;
            z-index: 99;
            margin-left: 0;
        }
        #saasloading .spinner {
            width: 150px;
            height: 36px;
            position: absolute;
            left: 50%;
            top: 400px;
            margin-left: -75px;
            text-align: center;
        }
        @media only screen and (max-width: 1400px) {
            #main .chartsdiv {
                float: none;
                height: 300px;
                margin: 40px auto;
            }
            #main #gailv {
                margin-top: 40px;
            }
            #saasloading {
                height: 98%;
            }
            #saasloading .spinner {
                top: 200px;
            }
        }
        #saasloading .spinner .bounce1, #saasloading .spinner .bounce2, #saasloading .spinner .bounce3 {
            width: 13px;
            height: 13px;
            /*background-color: #67CF22;*/
            background-color: #227dc5;
            border-radius: 100%;
            display: inline-block;
            -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
            animation: bouncedelay 1.4s infinite ease-in-out;
            /* Prevent first frame from flickering when animation starts */
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
        #saasloading .spinner .bounce1 {
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
        }
        #saasloading .spinner .bounce2 {
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
        }
        @-webkit-keyframes bouncedelay {
            0%, 80%, 100% {
                -webkit-transform: scale(0.0)
            }
            40% {
                -webkit-transform: scale(1.0)
            }
        }
        @keyframes bouncedelay {
            0%, 80%, 100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            40% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }
    </style>
</head>
<body>
<div id="saasloading">
    <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
</div>
<div id="main">
    <h2 class="title"><span id="comname">企业</span> - 生命周期预测</h2>

    <div id="container" class="chartsdiv"></div>
    <div id="gailv" class="chartsdiv" width="1200px"></div>
    <div id="hangye" class="chartsdiv"></div>
    <div id="diqu" class="chartsdiv"></div>
</div>
<script src="{{ STATIC_URL }}opensource/amazeui-2.4/js/jquery.min.js"></script>
<script src="{{ STATIC_URL }}opensource/highstock-5.0.2/highstock.js"></script>
<script src="{{ STATIC_URL }}opensource/miniui-3.5/miniui.js"></script>
<script>
    var rnum = (Math.random() * 2 + 1) * 1000;
    setTimeout(function () {
        $("#saasloading").hide();
    }, rnum);
    var img = [
        'url(/static/element/img/chuchuang.png)',
        'url(/static/element/img/chengzhang.png)',
        'url(/static/element/img/chengshu.png)',
        'url(/static/element/img/shuaitui.png)',
        'url(/static/element/img/siwang.png)'
    ];

    var imgnow = [
        'url(/static/element/img/chuchuang1.png)',
        'url(/static/element/img/chengzhang1.png)',
        'url(/static/element/img/chengshu1.png)',
        'url(/static/element/img/shuaitui1.png)',
        'url(/static/element/img/siwang1.png)'
    ];
    var data = {{ result|safe }};
    $("#comname").text(data.name);

    agechart(data);
    hangyechart(data);
    diquchart(data);
    gailvcharts(data);

    function agechart(data) {

        var qydata = [], xjiexian = [], jieduan = [];
        var a = 0, i = 0;
        {# 读取,添加后偏移,图片索引 #}
        jieduan[0] = data.qiyed[0][0] * 1000;
        jieduan[1] = data.qiyef[0] * 1000;
        jieduan[2] = data.qiyef[1] * 1000;
        jieduan[3] = data.qiyef[2] * 1000;
        jieduan[4] = data.qiyed[data.qiyed.length - 1][0] * 1000;
        xjiexian[0] = data.qiyed[0][0] + (data.qiyef[0] - data.qiyed[0][0]) / 2;
        xjiexian[1] = data.qiyef[0] + (data.qiyef[1] - data.qiyef[0]) / 2;
        xjiexian[2] = data.qiyef[1] + (data.qiyef[2] - data.qiyef[1]) / 2;
        xjiexian[3] = data.qiyef[2] + (data.qiyed[data.qiyed.length - 1][0] - data.qiyef[2]) / 2;
        var datenow = new Date();
        if (data.qiyed[0][0] > data.qiyef[0]) i = 1;
        for (; a < data.qiyed.length; a++) {
            if (xjiexian[i] == data.qiyed[a][0]) {
                if ((datenow.getTime() > jieduan[i]) && (datenow.getTime() < (jieduan[i + 1])))
                    qydata[a + i] = {y: data.qiyed[a][1], x: xjiexian[i] * 1000, marker: {symbol: imgnow[i]}};
                else
                    qydata[a + i] = {y: data.qiyed[a][1], x: xjiexian[i] * 1000, marker: {symbol: img[i]}};
                i++;
            }
            else {
                qydata[a + i] = {y: data.qiyed[a][1], x: data.qiyed[a][0] * 1000};
                if (a == data.qiyed.length - 1) continue;
                if ((xjiexian[i] > data.qiyed[a][0]) && (xjiexian[i] < data.qiyed[a + 1][0])) {
                    cy = data.qiyed[a][1] + (xjiexian[i] * 1000 - data.qiyed[a][0] * 1000) / (data.qiyed[a + 1][0] * 1000 - data.qiyed[a][0] * 1000) * (data.qiyed[a + 1][1] - data.qiyed[a][1]);
                    if ((datenow.getTime() > jieduan[i]) && (datenow.getTime() < (jieduan[i + 1])))
                        qydata[a + i + 1] = {y: cy, x: xjiexian[i] * 1000, marker: {symbol: imgnow[i]}};
                    else
                        qydata[a + i + 1] = {y: cy, x: xjiexian[i] * 1000, marker: {symbol: img[i]}};
                    i++;
                }
            }
             if(data.endtime&&(data.qiyed[a][0]>data.endtime)) break;
        }
        $('#container').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: "生命阶段示意图"
            },
            subtitle: {
                {#                text: data.name#}
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {year: ' %y年'},
                tickInterval: 3600 * 1000 * 24 * 365,
                plotLines: [
                    {# 定义各阶段分界线 #}
                    {
                        color: 'red',
                        dashStyle: 'longdashdot',
                        value: data.qiyed[0][0] * 1000,
                        width: 1,
                        label: {
                            rotation: 0,
                            text: '初<br>创<br>期',
                            align: 'left',
                            textAlign: 'left',
                            x: 10,
                            y: 15,
                            style: {"color": "#0e90d2", "fontSize": "12px"}
                        }
                    },
                    {
                        color: 'red',
                        dashStyle: 'longdashdot',
                        value: data.qiyef[0] * 1000,
                        width: 1,
                        label: {
                            rotation: 0,
                            text: '成<br>长<br>期',
                            align: 'left',
                            textAlign: 'left',
                            x: 10,
                            y: 15,
                            style: {"color": "#0e90d2", "fontSize": "12px"}
                        }
                    },
                    {
                        color: 'red',
                        dashStyle: 'longdashdot',
                        value: data.qiyef[1] * 1000,
                        width: 1,
                        label: {
                            rotation: 0,
                            text: '成<br>熟<br>期',
                            align: 'left',
                            textAlign: 'left',
                            x: 10,
                            y: 15,
                            style: {"color": "#0e90d2", "fontSize": "12px"}
                        }
                    },
                    {
                        color: 'red',
                        dashStyle: 'longdashdot',
                        value: data.qiyef[2] * 1000,
                        width: 1,
                        label: {
                            rotation: 0,
                            text: '衰<br>退<br>期',
                            align: 'left',
                            textAlign: 'left',
                            x: 10,
                            y: 15,
                            style: {"color": "#0e90d2", "fontSize": "12px"}
                        }
                    },
                    {
                        color: 'red',
                        dashStyle: 'longdashdot',
                        value: data.endtime*1000,
                        width: 1,
                        label: {
                            rotation: 0,
                            text: '企<br>业<br>已<br>'+data.endtype+'<br>销',
                            align: 'left',
                            textAlign: 'left',
                            x: -30,
                            y: 100,
                            style: {"color": "#ee0000", "fontSize": "15px"}
                        }
                    }]
            },
            yAxis: {
                title: {
                    text: null  //无标题
                },
                labels: {
                    enabled: false  //禁用
                }

            },
            tooltip: {
                formatter: function () {
                    var shiqi = '';
                    if (this.x < data.qiyef[0] * 1000) shiqi = '初创期';
                    else if ((this.x < data.qiyef[1] * 1000) && (this.x > data.qiyef[0] * 1000)) shiqi = '成长期';
                    else if ((this.x < data.qiyef[2] * 1000) && (this.x > data.qiyef[1] * 1000)) shiqi = '成熟期';
                    else if ((this.x > data.qiyef[2] * 1000) && (this.x < (data.qiyed[data.qiyed.length - 1][0]) * 1000)) shiqi = '衰退期';
                     if(data.endtime&&(this.x>data.endtime*1000)) shiqi = '死亡期';
                    return '<b>' + this.series.name + '</b><br/>' +
                            Highcharts.dateFormat('%Y年', this.x) + '处于:' + shiqi;
                }
            },
            plotOptions: {
                spline: {
                    marker: {
                        radius: 4,
                        lineColor: '#666666',
                        lineWidth: 1
                    }
                }
            },
            legend: {
                enabled: false
            },
            series: [{
                name: data.name,
                marker: {
                    enabled: true, /*数据点是否显示*/
                    radius: 1,
                    symbol: 'square'
                },
                data: qydata
            }]
        });
    };

    function hangyechart(data) {
        var qydata = [], xjiexian = [];
        var a = 0, i = 0;
        {# 读取,添加后偏移,图片索引 #}
        xjiexian[0] = data.hangyed[0][0] + data.hangyef[0] / 2;
        xjiexian[1] = data.hangyef[0] + (data.hangyef[1] - data.hangyef[0]) / 2;
        xjiexian[2] = data.hangyef[1] + (data.hangyef[2] - data.hangyef[1]) / 2;
        xjiexian[3] = data.hangyef[2] + (data.hangyed[data.hangyed.length - 1][0] - data.hangyef[2]) / 2;
        for (; a < data.hangyed.length; a++) {
            if (xjiexian[i] == data.hangyed[a][0]) {
                qydata[a + i] = {y: data.hangyed[a][1], x: xjiexian[i], marker: {symbol: img[i]}};
                i++;
            }
            else {
                qydata[a + i] = {y: data.hangyed[a][1], x: data.hangyed[a][0]};
                if (a == data.hangyed.length - 1) continue;
                if ((xjiexian[i] > data.hangyed[a][0]) && (xjiexian[i] < data.hangyed[a + 1][0])) {
                    cy = data.hangyed[a][1] + (xjiexian[i] - data.hangyed[a][0]) / (data.hangyed[a + 1][0] - data.hangyed[a][0]) * (data.hangyed[a + 1][1] - data.hangyed[a][1]);
                    qydata[a + i + 1] = {y: cy, x: xjiexian[i], marker: {symbol: img[i]}};
                    i++;
                }
            }
        }
        $('#hangye').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: '行业生命周期图 - ' + data.hangye
            },
            {#            subtitle: {#}
            {#                text: data.hangye#}
            {#            },#}
            legend: {
                enabled: false
            },
            xAxis: {
                tickInterval: 1,
                plotLines: [
                    {#             定义各阶段分界线 #}
                    {
                        color: 'red',
                        dashStyle: 'longdashdot',
                        value: data.hangyed[0][0],
                        width: 1,
                        label: {
                            rotation: 0,
                            text: '初<br>创<br>期',
                            align: 'left',
                            textAlign: 'left',
                            x: 10,
                            y: 15,
                            style: {"color": "#0e90d2", "fontSize": "12px"}
                        }
                    },
                    {
                        color: 'red',
                        dashStyle: 'longdashdot',
                        value: data.hangyef[0],
                        width: 1,
                        label: {
                            rotation: 0,
                            text: '成<br>长<br>期',
                            align: 'left',
                            textAlign: 'left',
                            x: 10,
                            y: 15,
                            style: {"color": "#0e90d2", "fontSize": "12px"}
                        }
                    },
                    {
                        color: 'red',
                        dashStyle: 'longdashdot',
                        value: data.hangyef[1],
                        width: 1,
                        label: {
                            rotation: 0,
                            text: '成<br>熟<br>期',
                            align: 'left',
                            textAlign: 'left',
                            x: 10,
                            y: 15,
                            style: {"color": "#0e90d2", "fontSize": "12px"}
                        }
                    },
                    {
                        color: 'red',
                        dashStyle: 'longdashdot',
                        value: data.hangyef[2],
                        width: 1,
                        label: {
                            rotation: 0,
                            text: '衰<br>退<br>期',
                            align: 'left',
                            textAlign: 'left',
                            x: 10,
                            y: 15,
                            style: {"color": "#0e90d2", "fontSize": "12px"}
                        }
                    },
                    {
                        color: 'red',
                        dashStyle: 'longdashdot',
                        value: data.hangyef[3],
                        width: 1,
                        label: {
                            rotation: 0,
                            text: '死<br>亡<br>高<br>风<br>险',
                            align: 'left',
                            textAlign: 'left',
                            x: 10,
                            y: 15,
                            style: {"color": "#0e90d2", "fontSize": "12px"}
                        }
                    }]
            },
            yAxis: {
                title: {
                    text: null  //无标题
                },
                labels: {
                    enabled: false  //禁用
                },
            },
            tooltip: {
                formatter: function () {
                    return data.hangye + this.x.toFixed(0) + '年后的生命状态';
                }
            },
            plotOptions: {           //图表风格
                spline: {
                    marker: {//节点
                        radius: 0,
                        lineColor: '#666666',
                        lineWidth: 1
                    }
                }
            },
            series: [{
                name: data.hangye + "行业内生命周期图",
                marker: {
                    enabled: true, /*数据点是否显示*/
                    radius: 1,
                    symbol: 'square'
                },
                data: qydata,
                zones: [
                    {
                        value: 0,
                        color: '#f7a35c',
                        dashStyle: 'dot'
                    },
                    {
                        value: 10,
                        color: '#8cb5ec'
                    },
                    {
                        value: 15,
                        color: '#9cb5ec'
                    },
                    {
                        value: 20,
                        color: '#acb5ec'
                    }, {
                        value: 25,
                        color: '#bcb5ec'
                    }, {
                        color: '#c0ed7d'
                    }
                ]
            }]
        });
    }

    function diquchart(data) {
        var qydata = [], xjiexian = [];
        var a = 0, i = 0;
        {# 读取,添加后偏移,图片索引 #}
        xjiexian[0] = data.diqud[0][0] + data.diquf[0] / 2;
        xjiexian[1] = data.diquf[0] + (data.diquf[1] - data.diquf[0]) / 2;
        xjiexian[2] = data.diquf[1] + (data.diquf[2] - data.diquf[1]) / 2;
        xjiexian[3] = data.diquf[2] + (data.diqud[data.diqud.length - 1][0] - data.diquf[2]) / 2;
        for (; a < data.diqud.length; a++) {
            if (xjiexian[i] == data.diqud[a][0]) {
                qydata[a + i] = {y: data.diqud[a][1], x: xjiexian[i], marker: {symbol: img[i]}};
                i++;
            }
            else {
                qydata[a + i] = {y: data.diqud[a][1], x: data.diqud[a][0]};
                if (a == data.diqud.length - 1) continue;
                if ((xjiexian[i] > data.diqud[a][0]) && (xjiexian[i] < data.diqud[a + 1][0])) {
                    cy = data.diqud[a][1] + (xjiexian[i] - data.diqud[a][0]) / (data.diqud[a + 1][0] - data.diqud[a][0]) * (data.diqud[a + 1][1] - data.diqud[a][1]);
                    qydata[a + i + 1] = {y: cy, x: xjiexian[i], marker: {symbol: img[i]}};
                    i++;
                }
            }
        }
        $('#diqu').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: '地区企业发展周期图 - ' + data.diqu
            },
            {#            subtitle: {#}
            {#                text: data.diqu#}
            {#            },#}
            legend: {
                {#                title: {text: data.diqu}#}
                enabled: false
            },
            xAxis: {
                tickInterval: 1,
                plotLines: [
                    {# 定义各阶段分界线 #}
                    {
                        color: 'red',
                        dashStyle: 'longdashdot',
                        value: data.diqud[0][0],
                        width: 1,
                        label: {
                            rotation: 0,
                            text: '初<br>创<br>期',
                            align: 'left',
                            textAlign: 'left',
                            x: 10,
                            y: 15,
                            style: {"color": "#0e90d2", "fontSize": "12px"}
                        }
                    },
                    {
                        color: 'red',
                        dashStyle: 'longdashdot',
                        value: data.diquf[0],
                        width: 1,
                        label: {
                            rotation: 0,
                            text: '成<br>长<br>期',
                            align: 'left',
                            textAlign: 'left',
                            x: 10,
                            y: 15,
                            style: {"color": "#0e90d2", "fontSize": "12px", 'letter-spacing': '200px'}
                        }
                    },
                    {
                        color: 'red',
                        dashStyle: 'longdashdot',
                        value: data.diquf[1],
                        width: 1,
                        label: {
                            rotation: 0,
                            text: '成<br>熟<br>期',
                            align: 'left',
                            textAlign: 'left',
                            x: 10,
                            y: 15,
                            style: {"color": "#0e90d2", "fontSize": "12px", 'dy': '100px'}
                        }
                    },
                    {
                        color: 'red',
                        dashStyle: 'longdashdot',
                        value: data.diquf[2],
                        width: 1,
                        label: {
                            rotation: 0,
                            text: '衰<br>退<br>期',
                            align: 'left',
                            textAlign: 'left',
                            x: 10,
                            y: 15,
                            style: {"color": "#0e90d2", "fontSize": "12px"}
                        }
                    },
                    {
                        color: 'red',
                        dashStyle: 'longdashdot',
                        value: data.diquf[3],
                        width: 1,
                        label: {
                            rotation: 0,
                            text: '死<br>亡<br>高<br>风<br>险',
                            align: 'left',
                            textAlign: 'left',
                            x: 10,
                            y: 15,
                            style: {"color": "#0e90d2", "fontSize": "12px"}
                        }
                    }]

            },
            yAxis: {
                title: {
                    text: null  //无标题
                },
                labels: {
                    enabled: false  //禁用
                }
            },
            tooltip: {
                formatter: function () {
                    return data.diqu + '地区的企业' + this.x.toFixed(0) + '年后的生命状态';
                }
            },
            plotOptions: {           //图表风格
                spline: {
                    marker: {//节点
                        radius: 0,
                        lineColor: '#666666',
                        lineWidth: 1
                    }
                }
            },
            series: [{
                name: data.diqu + "地区企业生命周期图",
                marker: {
                    enabled: true, /*数据点是否显示*/
                    radius: 1,
                    symbol: 'square'
                },
                data: qydata,
                zones: [
                    {
                        value: 0,
                        color: '#f7a35c',
                        dashStyle: 'dot'
                    },
                    {
                        value: 0.5,
                        color: '#8cb5ec'
                    },
                    {
                        value: 15,
                        color: '#9cb5ec'
                    },
                    {
                        value: 20,
                        color: '#acb5ec'
                    }, {
                        value: 25,
                        color: '#bcb5ec'
                    }, {
                        color: '#c0ed7d'
                    }
                ]
            }]
        });
    }

    function gailvcharts(data) {
        if(data.endtime){
            $('#gailv').css("display", "none");
            return;
        }
        var gly = new Array(6),
                glx = new Array(6);
        for (var i = 0; i < 6; i++) {
            gly[i] = {y: data.gld[i][1], x: data.gld[i][0] * 1000};
        }
        $('#gailv').highcharts({
            title: {
                text: '企业死亡概率图'
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {year: ' %y年%m月'},
                tickInterval: 3600 * 1000 * 24 * 365 / 12,
                labels: {
                    formatter: function () {
                        var myDate = new Date(this.value); //实例一个时间对象；
                        return myDate.getFullYear() + '年' + (myDate.getMonth() + 1) + '月';
                    }
                }
            },
            yAxis: {
                title: {
                    rotation: 0,
                    text: '概<br>率<br>(%)',
                    aling: 'low',
                },
                labels: {
                    formatter: function () {
                        return (this.value * 100).toFixed(2) + '%';
                    }

                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {

                formatter: function () {
                    var myDate = new Date(this.x); //实例一个时间对象；
                    return '<b>' + this.series.name + '</b><br/>' + myDate.getFullYear() + '年' + (myDate.getMonth() + 1) + '月份死亡概率为:' + (this.y * 100).toFixed(2) + '%';
                }
            },
            legend: {
                enabled: false
            },
            series: [{
                name: data.name,
                data: gly
            }]
        });
    }
</script>

</body>
</html>
